<template>
	<!-- 售后服务 -->
	<view class="container">
		<!-- 标题 -->
		<headTitle title="售后服务" :server="true" :mine="true"></headTitle>
		<view class="navbar bgfff flex-center-between">
			<view v-for="(item, index) in navList" :key="index" @click="tabClick(index)"
				class="nav-item" :class="{ current: tabCurrentIndex === index }">
				{{ item }}
			</view>
		</view>
		
		<view v-if="!isEmpty">
			<view class="list" v-for="(item, index) in marketList" :key="index">
				<view class="item bgfff">
					<view class="top">
						<text class="font26 color666">{{ tabCurrentIndex === 0 ? '订单编号' : '服务单号' }}：{{tabCurrentIndex === 0 ? item.orderSn : item.aftersalesSn}}</text>
					</view>
					<view class="middle flex-center">
						<image :src="item.productPic" mode="aspectFill"></image>
						<view class="right flex-column-between">
							<view class="info flex-column">
								<view class="title show-two-text font28 color333">{{ item.productName }}</view>
								<view class="attr-box font24 color999">{{ item.productAttr }}</view>
							</view>
							<view class="prcie-b flex-center-between">
								<view class="price flex-center">
									<text class="font24 color333">￥</text>
									<text class="font30 color333">{{ item.realAmount }}</text>
								</view>
								<text class="font26 color666">x{{ item.productQuantity }}</text>
							</view>
						</view>
					</view>
					<view class="bottom flex-center-between" v-if="tabCurrentIndex === 0">
						<view class="font30 color999">{{ item.aftersalesType === 0 ? '' : '该商品已超过售后期' }}</view>
						<button class="btn font28 colorfff" :class="{'disable': item.aftersalesType !== 0}" @tap="apply(item.aftersalesType, item.id)">申请售后</button>
					</view>
					<view class="bottom flex-center-between" v-if="tabCurrentIndex === 1" @tap="navToTabPage(item.id)">
						<view class="font30 color999" :style="{'color': handleColor(item.status)}">{{ handleText(item.status) }}</view>
						<text class="yticon icon-you"></text>
					</view>
				</view>
			</view>
		</view>
		
		<uni-load-more :status="loadingType" v-if="!isEmpty"></uni-load-more>
		<!-- 空白页 -->
		<empty title="您还没有相关的订单" v-if="isEmpty"></empty>
	</view>
</template>

<script>
import Api from '@/common/api'
import empty from '@/components/empty'
import headTitle from '@/components/head-title.vue'
import uniLoadMore from '@/components/uni-load-more/uni-load-more'
export default {
	data() {
		return {
			tabCurrentIndex: 0,
			navList: ['申请售后', '申请记录'],
			pageNum: 1,
			loadingType: 'more', //加载更多状态
			toggleData: '', // 切换页面需要重新请求数据(记录token)
			isEmpty: false, // 不为空
			marketList: [], // 售后数据
		}
	},
	onLoad(opt){ 
		if(opt.status) {
			this.tabCurrentIndex = 1
		}
		this.toggleData = uni.getStorageSync('token')
		if (!this.toggleData) {
			uni.navigateTo({
				url: '/pages/public/login'
			})
			return
		}
		this.getData('refresh')
	},
	onShow() {
		if(this.toggleData !== uni.getStorageSync('token')) {
			this.toggleData = uni.getStorageSync('token')
			this.pageNum = 1
			this.getData('refresh')
		}
	},
	// 加载更多
	onReachBottom() {
		this.pageNum += 1
		this.getData()
	},
	methods: {
		// 页面跳转售后详情
		navToTabPage(id) {
			uni.navigateTo({ url: '/pages/order/marketDes?id=' + id })
		},
		//申请售后
		apply(status, id) {
			if(status !== 0) return 
			uni.navigateTo({ url: '/pages/order/marketApply?id=' + id })
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index
			this.pageNum = 1
			this.getData('refresh')
		},
		// 处理文本
		handleText(type) {
			let txt = ''
			switch (type){
				case 1:
					txt = '已提交售后申请.待商家处理'
					break;
				case 2:
				case 3:
					txt = '已完成'
					break;
				case 4:
					txt = '申请被拒'
					break;
			}
			return txt
		},
		// 处理颜色
		handleColor(type) {
			let color = ''
			switch (type){
				case 1:
					color = '#999'
					break;
				case 2:
				case 3:
					color = '#666'
					break;
				case 4:
					color = '#C84739'
					break;
			}
			return color
		},
		/**
		 * 获取列表数据
		 */
		async getData(type = 'add'){
		    // 没有更多直接返回
			if (type === 'add') {
				if (this.loadingType === 'nomore') {
					return
				}
				this.loadingType = 'loading'
			} else {
				this.loadingType = 'loading'
				// this.loadingType = 'more'
			}
			
			let isLoading = false
 			if (type === 'refresh') {
				this.isEmpty = false
				this.marketList = []
				isLoading = true
			}
			
			// 申请售后
			let url = Api.order.getMarketServer
			if (this.tabCurrentIndex === 1) {
				// 申请记录
				url = Api.order.getMarketRecord
			}
			let list = await Api.apiCall('get', url, { 
				pageIndex: this.pageNum,
				pageSize: 10,
			}, isLoading)
			if(!list) return
			
			let marketList = list.recordList
			this.marketList = this.marketList.concat(marketList)
			
			if(this.marketList.length === 0) {
				// 显示无相关订单
				this.isEmpty = true
			}
			
			// 判断是否有下一页数据
			this.loadingType = list.hasMore == 0 ? 'nomore' : 'more'
		},
	},
	components: {
		headTitle,
		uniLoadMore,
		empty,
	}
}
</script>

<style lang="scss">
page {
	background-color: #F5F5F5;
}

.container {
	padding-top: 178rpx;
}

.navbar {
	width: 100%;
	height: 90rpx;
	padding: 0 130rpx;
	position: fixed;
	top: 88rpx;
	left: 0;
	border-bottom: 1rpx solid #eee;
	z-index: 10;
	.nav-item {
		height: 100%;
		line-height: 90rpx;
		font-size: 28rpx;
		color: #AEA8A2;
		position: relative;
		&.current {
			font-size: 34rpx;
			font-weight: bold;
			color: #333;
			&:after {
				content: '';
				position: absolute;
				left: 0;
				bottom: 0;
				width: 34rpx;
				height: 6rpx;
				background-color: #333;
				border-radius: 5rpx;
			}
		}
	}
}

.icon-you {
	font-size: $font-base;
	color: #AEA8A2;
}

.list {
	padding: 20rpx 20rpx 0;
	.item {
		width: 100%;
		height: 432rpx;
		border-radius: 8rpx;
		box-shadow:0px 2px 10px 0px rgba(153,153,153,0.2);
		.top {
			padding-left: 20rpx;
			height: 90rpx;
			line-height: 90rpx;
		}
		.middle {
			padding: 30rpx 20rpx;
			height: 238rpx;
			background-color: #F9F9F9;
			image {
				width: 178rpx;
				height: 178rpx;
				border-radius: 3rpx;
				margin-right: 21rpx;
			}
			.right {
				width: calc(100% - 200rpx);
				height: 178rpx;
				.info {
					transform: translateY(-2px);
					.title {
						line-height: 42rpx;
					}
					.attr-box {
						margin-top: 12rpx;
					}
				}
				.prcie-b {
					transform: translateY(5px);
					.price {
						align-items: baseline;
					}
				}
			}
		}
		.bottom {
			padding: 0 30rpx;
			height: 104rpx;
			.btn {
				width: 160rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				border-radius: 32rpx;
				background-color: #C84739;
				margin: 0;
				padding: 0;
				&.disable {
					background-color: #DDD;
				}
				&::after {
					border: 0;
				}
			}
			.color-red {
				color: #C84739;
			}
		}
	}
}
</style>
